<template>
  <page-frame>
    <div class="member-file">
      <div class="toptitle">
        <div class="left">会员退住-退住申请</div>
        <div class="right">
          <div class="btns">
            <el-button @click="submit" class="lightGreenBtn">提交审核</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="retreatProcess01">
        <div class="step-show" @click="showStep">
          <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
          <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
          {{show}}
        </div>
        <div class="stepbar" v-show="isShowStep">
          <stepRetreat :stepData="stepData"></stepRetreat>
        </div>
        <div class="retrearInput">
          <el-form :model="get_data" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="会员姓名">
                      <el-autocomplete v-model="memberName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                    </el-form-item>
                    </el-col>
                  <el-col :span="12">
                    <el-form-item label="会员编号">
                      <el-input v-model="memberInfor.memberNo" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="床位" :disabled="true">
                      <el-input v-model="memberInfor.bedNo" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="照护等级" :disabled="true">
                      <el-input v-model="memberInfor.lidName" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入住日期">
                      <el-date-picker
                        v-model="memberInfor.dateCheckin"
                        type="date"
                        disabled
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="退住日期">
                      <el-date-picker
                        v-model="form.dateApplication"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退住原因">
                  <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepRetreat from '../../components/stepbar/retreat.vue';
  import retiredApi from '../../service/member/retiredApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    methods: {
      init(){
        this.getAllMember();
      },
      nextStep(){
        this.$router.push({name:"membersRetired"});
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
          console.debug(results);
        }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
        this.memberInfor = item;
        this.form.memberId = item.memberId;
        this.form.bedId = item.bedId;
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        commonApi.getAllCheckInMemberInfor().then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
           var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
      getfileList(){

      },
      getOrgList(){

      },
      exportOrder(){

      },
      edit(){},
      handleCurrentChange(val) {

      },
      back(){
        this.$router.push({name:"membersRetired"});
      },
      submit(){
        let self = this;
        self.$confirm('确认提交会员 '+self.memberName+" 的退住申请", '退住申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          retiredApi.memberRetiredApplyingFor(self.form).then(function () {
            self.$message({
              type: 'success',
              message: '申请成功!'
            });
            self.$router.push({name:"membersRetired"});
          },function(res){
           self.$message({
             type: 'error',
             message: res.data.message
           });
        });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '申请退住失败'
          });
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.queryData,val);
      },
    },
    mounted: function () {
      this.init();
    },
    components: {
      stepRetreat
    },
    data() {
      return {
        stepData:1,
        form:{
          "bedId": 0,
          "dateApplication": new Date(),
          "memberId": 0,
          "remark": ""
        },
        members:[],
        memberInfor:{},
        leaveDate:"",
        leave:false,
        memberName:"",
        isShowStep:false,
        show:"显示流程图",
      }
    },
  }
</script>
<style>
  .file-main{

  }
  .retreatProcess01 .retrearInput{
    width: 70%;
    margin: 0 auto;
    padding-left: 30px;
  }

  .input .btns{
    float:none!important;
    display:inline-block;
  }
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .query{
    margin-right:30px;
  }
  .retreatProcess01  .el-autocomplete{
    width: 100%!important;
  }
</style>


